<div class="mainContainer">
  <div class="module txsInfo">
    <div class="cardTitle">交易信息</div>
    <hr class="cardTitileDivider" />
    <nz-table class="txsInfoTable" #txsInfoTable nzSize="small" [nzWidthConfig]="txsInfoTableTab" (nzPageIndexChange)="judge_change()"
      [nzData]="this.txsInfoItems" nzTableLayout="fixed" [nzPageSize]="15" [nzTotal]="this.blockNumber" [nzHideOnSinglePage]="false">
      <thead>
        <tr>
          <th [(nzSortOrder)]="listOfColumns[0].sortOrder" [nzSortFn]="listOfColumns[0].sortFn">
            {{ listOfColumns[0].name }}
          </th>
          <th>交易Hash</th>
          <th>From</th>
          <th>To</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of txsInfoTable.data; let i = index">
          <td>{{ item.time }}</td>
          <td nzEllipsis>
            <span nz-tooltip [nzTooltipTitle]="item.hash" nzTooltipPlacement="top">
              {{ item.hash }}
            </span>
          </td>
          <td nzEllipsis>
            <span nz-tooltip [nzTooltipTitle]="item.from" nzTooltipPlacement="top">
              {{ item.from }}
            </span>
          </td>
          <td nzEllipsis>
            <span nz-tooltip [nzTooltipTitle]="item.to" nzTooltipPlacement="top">
              {{ item.to }}
            </span>
          </td>
          <td>
            <span><a (click)="this.showModal(item.hash)">详情</a></span>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>
  <nz-modal [(nzVisible)]="isVisible" nzTitle="" [nzClosable]="false" (nzOnCancel)="handleSettingCancel()"
    (nzOnOk)="handleSettingOk()" [nzContent]="settingContent" [nzOkText]="'确认'" [nzStyle]="{ width: '800px' }">
    <ng-template #settingContent>
      <div class="modalWhole">
        <div class="module txsInfomation">
          <div class="cardTitle">
            <span> 交易信息 </span>
          </div>
          <hr class="cardTitileDivider" />
          <div nz-row class="detailwhole">
            <div nz-col [nzSpan]="5" [nzOffset]="1">
              <p class="detailLabel">Block Hash: </p>
            </div>
            <div nz-col [nzSpan]="18">
              <span nz-tooltip [nzTooltipTitle]="this.txInfo.blockHash" nzTooltipPlacement="top" class="detailInfo">
                {{ this.txInfo.blockHash }}
              </span>
            </div>
          </div>
  
          <div nz-row class="detailwhole">
            <div nz-col [nzSpan]="5" [nzOffset]="1">
              <p class="detailLabel">Block Height: </p>
            </div>
            <div nz-col [nzSpan]="18">
              <span nz-tooltip [nzTooltipTitle]="this.txInfo.blockNumber" nzTooltipPlacement="top" class="detailInfo">
                {{ this.txInfo.blockNumber }}
              </span>
            </div>
          </div>
  
          <div nz-row class="detailwhole">
            <div nz-col [nzSpan]="5" [nzOffset]="1">
              <p class="detailLabel">Gas: </p>
            </div>
            <div nz-col [nzSpan]="18">
              <span nz-tooltip [nzTooltipTitle]="this.txInfo.gas" nzTooltipPlacement="top" class="detailInfo">
                {{ this.txInfo.gas }}
              </span>
            </div>
          </div>
  
          <div nz-row class="detailwhole">
            <div nz-col [nzSpan]="5" [nzOffset]="1">
              <p class="detailLabel">From: </p>
            </div>
            <div nz-col [nzSpan]="18">
              <span nz-tooltip [nzTooltipTitle]="this.txInfo.from" nzTooltipPlacement="top" class="detailInfo">
                {{ this.txInfo.from }}
              </span>
            </div>
          </div>
  
          <div nz-row class="detailwhole">
            <div nz-col [nzSpan]="5" [nzOffset]="1">
              <p class="detailLabel">To: </p>
            </div>
            <div nz-col [nzSpan]="18">
              <span nz-tooltip [nzTooltipTitle]="this.txInfo.to" nzTooltipPlacement="top" class="detailInfo">
                {{ this.txInfo.to }}
              </span>
            </div>
          </div>
  
          <div nz-row class="detailwhole">
            <div nz-col [nzSpan]="5" [nzOffset]="1">
              <p class="detailLabel">nonceRaw: </p>
            </div>
            <div nz-col [nzSpan]="18">
              <span nz-tooltip [nzTooltipTitle]="this.txInfo.nonceRaw" nzTooltipPlacement="top" class="detailInfo">
                {{ this.txInfo.nonceRaw }}
              </span>
            </div>
          </div>
  
          <div nz-row class="detailwhole">
            <div nz-col [nzSpan]="5" [nzOffset]="1">
              <p class="detailLabel">Hash: </p>
            </div>
            <div nz-col [nzSpan]="18">
              <span nz-tooltip [nzTooltipTitle]="this.txInfo.hash" nzTooltipPlacement="top" class="detailInfo">
                {{ this.txInfo.hash }}
              </span>
            </div>
          </div>

          <div nz-row class="detailwhole">
            <div nz-col [nzSpan]="5" [nzOffset]="1">
              <p class="detailLabel">Input: </p>
            </div>
            <div nz-col [nzSpan]="18">
              <span nz-tooltip [nzTooltipTitle]="this.txInfo.input" nzTooltipPlacement="top" class="detailInfo">
                {{ this.txInfo.input }}
              </span>
            </div>
          </div>
        </div>
        
        <div class="module txsRecipy">
          <div class="cardTitle">
            <span> 交易回执  </span>
          </div>
          <hr class="cardTitileDivider" />
          <div nz-row class="detailwhole">
            <div nz-col [nzSpan]="5" [nzOffset]="1">
              <p class="detailLabel">output: </p>
            </div>
            <div nz-col [nzSpan]="18">
              <span nz-tooltip [nzTooltipTitle]="this.txRecipy.output" nzTooltipPlacement="top" class="detailInfo">
                {{ this.txRecipy.output }}
              </span>
            </div>
          </div>
  
          <div nz-row class="detailwhole">
            <div nz-col [nzSpan]="5" [nzOffset]="1">
              <p class="detailLabel">blockHash: </p>
            </div>
            <div nz-col [nzSpan]="18">
              <span nz-tooltip [nzTooltipTitle]="this.txRecipy.blockHash" nzTooltipPlacement="top" class="detailInfo">
                {{ this.txRecipy.blockHash }}
              </span>
            </div>
          </div>
  
          <div nz-row class="detailwhole">
            <div nz-col [nzSpan]="5" [nzOffset]="1">
              <p class="detailLabel">gasUsed: </p>
            </div>
            <div nz-col [nzSpan]="18">
              <span nz-tooltip [nzTooltipTitle]="this.txRecipy.gasUsed" nzTooltipPlacement="top" class="detailInfo">
                {{ this.txRecipy.gasUsed }}
              </span>
            </div>
          </div>
  
          <div nz-row class="detailwhole">
            <div nz-col [nzSpan]="5" [nzOffset]="1">
              <p class="detailLabel">blockNumber: </p>
            </div>
            <div nz-col [nzSpan]="18">
              <span nz-tooltip [nzTooltipTitle]="this.txRecipy.blockNumber" nzTooltipPlacement="top" class="detailInfo">
                {{ this.txRecipy.blockNumber }}
              </span>
            </div>
          </div>
  
          <div nz-row class="detailwhole">
            <div nz-col [nzSpan]="5" [nzOffset]="1">
              <p class="detailLabel">contractAddress: </p>
            </div>
            <div nz-col [nzSpan]="18">
              <span nz-tooltip [nzTooltipTitle]="this.txRecipy.contractAddress" nzTooltipPlacement="top" class="detailInfo">
                {{ this.txRecipy.contractAddress }}
              </span>
            </div>
          </div>
  
          <div nz-row class="detailwhole">
            <div nz-col [nzSpan]="5" [nzOffset]="1">
              <p class="detailLabel">from: </p>
            </div>
            <div nz-col [nzSpan]="18">
              <span nz-tooltip [nzTooltipTitle]="this.txRecipy.from" nzTooltipPlacement="top" class="detailInfo">
                {{ this.txRecipy.from }}
              </span>
            </div>
          </div>
  
          <div nz-row class="detailwhole">
            <div nz-col [nzSpan]="5" [nzOffset]="1">
              <p class="detailLabel">transactionindex: </p>
            </div>
            <div nz-col [nzSpan]="18">
              <span nz-tooltip [nzTooltipTitle]="this.txRecipy.transactionIndex" nzTooltipPlacement="top" class="detailInfo">
                {{ this.txRecipy.transactionIndex }}
              </span>
            </div>
          </div>
  
          <div nz-row class="detailwhole">
            <div nz-col [nzSpan]="5" [nzOffset]="1">
              <p class="detailLabel">to: </p>
            </div>
            <div nz-col [nzSpan]="18">
              <span nz-tooltip [nzTooltipTitle]="this.txRecipy.to" nzTooltipPlacement="top" class="detailInfo">
                {{ this.txRecipy.to }}
              </span>
            </div>
          </div>
  
          <div nz-row class="detailwhole">
            <div nz-col [nzSpan]="5" [nzOffset]="1">
              <p class="detailLabel">logsBloom: </p>
            </div>
            <div nz-col [nzSpan]="18">
              <span nz-tooltip [nzTooltipTitle]="this.txRecipy.logsBloom" nzTooltipPlacement="left" class="detailInfo">
                {{ this.txRecipy.logsBloom }}
              </span>
            </div>
          </div>
  
          <div nz-row class="detailwhole">
            <div nz-col [nzSpan]="5" [nzOffset]="1">
              <p class="detailLabel">transactionHash: </p>
            </div>
            <div nz-col [nzSpan]="18">
              <span nz-tooltip [nzTooltipTitle]="this.txRecipy.transactionHash" nzTooltipPlacement="top" class="detailInfo">
                {{ this.txRecipy.transactionHash }}
              </span>
            </div>
          </div>

          <div nz-row class="detailwhole">
            <div nz-col [nzSpan]="5" [nzOffset]="1">
              <p class="detailLabel">status: </p>
            </div>
            <div nz-col [nzSpan]="18">
              <span nz-tooltip [nzTooltipTitle]="this.txRecipy.status" nzTooltipPlacement="top" class="detailInfo">
                {{ this.txRecipy.status }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </ng-template>
  </nz-modal>
</div>
